html.body,div,header,nav,menu,main,article,aside,footer,ul,li,h1,h2,h3,h4,p,span,i,b,em,label,input,button{display:block;margin:0;padding:0;box-sizing:border-box}
input[type="submit"],input[type="reset"],input[type="button"],input{resize:none}
img{width:auto\9;display:block;-ms-interpolation-mode:bicubic;border:0}button{cursor:pointer;transition:all .25s}
em,i{font-style:normal}ul,li{list-style-type:none}html{background:#202022;font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}
body{width:100%;margin:0 auto;font:1.4rem/1.5 Montserrat,Arial,sans-serif;color:#3e3e46;background:#f2f3f6;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
a{text-decoration:none;color:#3e3e46}a:hover{text-decoration:none}ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%}input,button,textarea{font-family:'Microsoft YaHei';border:0;outline:0}
a:link,a:active,a:visited,a:hover{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both}
.wrapper{width:1200px;margin:0 auto}.dark body{background:#18181a}.dark body,.dark a{color:#acacb1}
nav{position:relative;height:6rem;line-height:6rem;background:#2b2b31}nav h1{font-size:1.6rem;font-weight:400;color:#c6c5ce;margin:0 8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dark-light{position:absolute;top:0;right:1rem;cursor:pointer}.dark-light svg{display:block;width:2rem;height:2rem;padding:1.8rem 2rem}
.dark-light path{fill:#fafbfc}.dark-light path.d{display:block}.dark-light path.l{display:none}
.toggle-menu{position:absolute;top:0;left:1rem;width:5.7rem;height:6rem;cursor:pointer}
.toggle-menu svg{display:block;width:1.7rem;height:1.7rem;padding:2.1rem 2rem}.toggle-menu svg path{fill:#fafbfc}
.topmenu{position:absolute;display:none;background:#6036ff;top:5.9rem;left:0;z-index:999999;width:auto;min-width:10rem;line-height:3.6rem;text-align:left;padding:1.5rem 0;font-size:1.4rem;font-weight:700;white-space:nowrap}
.topmenu a{display:block;color:#fff;padding:0 2.3rem}.topmenu a:hover{background:#6036ff}
.toggle-menu:hover{background:#5433da;border-color:#6036ff}.toggle-menu:hover svg path{fill:#fff}
.toggle-menu:hover .topmenu{display:block}.dark nav{background:rgba(0,0,0,0);border-bottom:1px solid #202022}
.dark .dark-light path.l{display:block}.dark .dark-light path.d{display:none}@media all and (max-width:760px){.wrapper{width:100%}
nav h1{margin:0 6rem}.toggle-menu{left:0}.dark-light{right:0}}.top-oper{height:7.6rem;background:#fafbfc;border-bottom:1px solid #f2f3f6}
.top-oper label{display:flex;float:left;width:20%;margin:1.7rem 1.2rem 0 0;padding:1rem 2.8rem;line-height:2rem;background:#fafbfc;border-radius:.3rem;border:.1rem solid #f0f0f2;box-sizing:border-box}
.top-oper label:first-child{margin:1.7rem 0 0 0;border-radius:.3rem 0 0 .3rem;border-right-width:0}
.top-oper label:nth-child(2){border-radius:0 .3rem .3rem 0}.top-oper label span{display:block;width:50%}
.top-oper input{width:50%;line-height:2rem;height:2rem;text-align:right;color:#3c4859;background:rgba(0,0,0,0)}
.top-oper .chk{width:22%;margin:1.7rem 0 0 0;cursor:pointer;border-style:dashed}
.top-oper .chk span{width:90%}.top-oper .chk input{display:none}.top-oper .chk i{position:relative;display:block;float:right;width:2.4rem;height:1.2rem;margin:.4rem .7rem 0 0;border-radius:2rem;border:1px solid #9ea1ab;transition:all .3s;background:#f8f9fc;cursor:pointer}
.top-oper .chk i:after{content:" ";position:absolute;border-radius:2rem;width:50%;height:100%;top:0;left:50%;border:1px solid #787c86;margin:-1px;box-shadow:0 .1rem .2rem rgba(106,122,156,0.2);transition:all .3s ease;background:#828690}
.dark .top-oper .chk i{border:1px solid #79797d;background:#424248}.dark .top-oper .chk i:after{border:1px solid #dad9e0;background:#eaebf1}
.top-oper .chk.on i{border:1px solid #6036ff;background:#6036ff}.top-oper .chk.on i:after{left:0;border:0;background:#fff;margin:0}
.top-oper .btn{width:14%;float:right;padding:1.7rem 0}.top-oper button{width:100%;display:block;background:#6036ff;color:#fff;line-height:4.2rem;border-radius:.3rem}
.top-oper button:hover{background:#313cd6}.dark .top-oper{background:#202022;border-bottom-color:#202022}
.dark .top-oper label{background:rgba(0,0,0,0);border-color:#313133}.dark .top-oper input{color:#b2b9c7}
@media all and (max-width:760px){.top-oper{height:auto;padding:1.5rem 2rem}.top-oper label{float:none;width:100%;margin:0 0 1rem !important;padding:1.5rem 1.6rem}
.top-oper label:first-child{border-right-width:.1rem;border-radius:.3rem}.top-oper label:nth-child(2){border-radius:.3rem}
.top-oper .chk{width:100%}.top-oper .btn{width:100%;float:none;padding:1.2rem 2rem}
}.pwd-oper{background:#fafbfc;line-height:5rem;font-size:1.3rem}.pwd-oper .tit{padding:2rem 0 1rem}
.pwd-oper .row{display:flex}.chk-tick{display:flex;padding:0 1.8rem;border:1px dashed #8b8b9a;margin:0 1rem 0 0;width:24%;position:relative;cursor:pointer;border-radius:.3rem}
.chk-tick.on{border:1px solid #8b8b9a}.chk-tick:last-child{margin:0;width:28%}.chk-tick input[type="checkbox"]{display:none}
.chk-tick svg{width:1.5rem;height:1.5rem;display:block;position:absolute;top:50%;right:1.6rem;margin-top:-.8rem}
.chk-tick path{display:none;fill:#6036ff;fill-rule:evenodd}.chk-tick .n{display:block;fill:#8b8b9a}
.chk-tick.on .y{display:block}.chk-tick.on .n{display:none}.chk-tick input[type="text"]{color:#6e6f7b;padding:0 1rem}
.chk-tick.on input[type="text"],.chk-tick input[type="text"]:focus{color:#17151f}
.chk-tick.on input[type="text"]:focus{color:#13131d}
.pwd-oper input{background:rgba(0,0,0,0)}.pwd-oper .ipt{display:flex;width:50%;margin-top:2rem;border:1px solid #8b8b9a;cursor:pointer;padding:0 1.8rem;border-radius:.3rem}
.pwd-oper .ipt span{width:20rem}.pwd-oper .ipt input{width:100%;color:#2e2f3c;text-align:center}
.pwd-oper .ipt:last-child{margin-left:1rem}.pwd-oper .ipt:hover,.pwd-oper .ipt.focus{color:#22212f}
.pwd-oper .ipt:hover input,.pwd-oper .ipt.focus input{color:#262435}.pwd-oper .btn{padding:2.6rem 0 3.5rem}
.pwd-oper .btn button{margin:0 auto;line-height:4.4rem;padding:0 5rem;border-radius:2.2rem;background:#6036ff;color:#fff;font-size:1.8rem}
.pwd-oper .btn button:hover{background:#12bb63}.dark .pwd-oper{background:#202022}
.dark .chk-tick{border-color:#313133}.dark .chk-tick.on{border-style:solid}.dark .chk-tick input[type="text"]{color:#bcb8cc}
.dark .chk-tick.on input[type="text"],.dark .chk-tick input[type="text"]:focus{color:#bcb8cc}
.dark .chk-tick.on input[type="text"]:focus{color:#fff}
.dark .pwd-oper .ipt{border-color:#313133}.dark .pwd-oper .ipt input{color:#ececec}
.dark .pwd-oper .ipt:hover,.dark .pwd-oper .ipt.focus{color:#c3c3ca}.dark .pwd-oper .ipt:hover input,.dark .pwd-oper .ipt.focus input{color:#fff}
@media all and (max-width:760px){.pwd-oper .tit{padding:1rem 2rem .5rem}.pwd-oper .row{display:block;padding:0 2rem}
.chk-tick{width:100%;margin:0 0 1.5rem 0}.chk-tick:last-child{width:100%}.pwd-oper .ipt{width:100%}
.pwd-oper .ipt:last-child{margin-left:0}}.home-random{position:relative;text-align:center;padding:3rem 0 5rem}
.random-item{display:inline-block;font-family:Impact,Charcoal,sans-serif;line-height:100%;padding:0 3.5rem;box-sizing:border-box}
.randoms{display:block;min-height:22rem;color:#2f3035}.randoms.mum1 .random-item{width:100%;line-height:140%}
.dark .randoms{color:#f9f9f9}.home-random .btn-full{position:absolute;bottom:7rem;right:-7rem;display:block;width:6rem;text-align:center;padding:1.8rem;background:#fafbfc;font-size:2rem;cursor:pointer;transition:all .3s}
.dark .home-random .btn-full{background:#202022}.home-random .btn-full:hover{background:#6036ff}
.home-random .btn-full svg{display:block;width:2.2rem;height:2.2rem;transition:all .25s}
.home-random .btn-full path{fill:#b0b1bd}.home-random .btn-full:hover path{fill:#fff}
.home-random .btn-full:hover svg{transform:scale(1.2)}.home-random .btn-full .off{display:none}
.home-random .btns{text-align:center;height:9rem;padding:2rem}.home-random .btns button,.dice-roller .btns button{margin:0 auto;line-height:5rem;padding:0 5rem;border-radius:5rem;background:#6036ff;color:#fff;font-size:1.8rem}
.home-random .btns button:hover,.dice-roller .btns button:hover{background:#12bb63}.home-random .btns #stop{display:none;background:#d22856}
.home-random .recent{padding:2.3rem 0 0;font-size:1.2rem;color:#a9aaaf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media all and (max-width:760px){.home-open,.home-random .btn-full{display:none}}.full{background:#f2f3f6;padding:3rem 12rem 12rem;display:table}
.full .btns{position:absolute;bottom:9rem;left:50%;margin-left:-10rem}.full .btns button{padding:.6rem 6rem}
.full .btn-full{bottom:3rem;right:3rem}.full .btn-full .on{display:none}.full .btn-full .off{display:block}
.full .recent{display:none}.full .randoms{width:100%;height:100%;display:table-cell;vertical-align:middle}
.dark .full{background:#18181a}#pwd-result{padding:3rem 0 0;margin:0 -1rem}.pwd-tip{padding:3rem 0 0;text-align:center;color:#afb0b7}
.pw-item{position:relative;width:50%;float:left;margin-bottom:2.3rem;padding:0 1rem}
.pw-item .pw{padding:2.8rem 12rem 6.6rem 3.5rem;font-size:2.6rem;color:#1a1c29;line-height:4rem;border-radius:.3rem;background:#fff;word-break:break-all;word-wrap:break-word;box-shadow:0 0 .2rem rgba(0,0,0,0.12)}
.pw-item .copy{position:absolute;right:3.9rem;top:3.2rem;padding:0 1.6rem;text-align:center;line-height:3.6rem;border:1px solid #d8d8e2;color:#4b4e52;border-radius:.4rem;background:rgba(0,0,0,0)}
.pw-item .copy:hover{background:#6036ff;border-color:#6036ff;color:#fff}.pw-item .pw-msg{position:absolute;bottom:3.1rem;left:4.5rem;font-weight:400;line-height:2rem;color:#c0c1c5;font-size:1rem}
.pw-item .pw-msg font{color:#674dc5}.pw-item.rank-1 .pw-msg font{color:#d63a3a}.pw-item.rank-2 .pw-msg font{color:#e4b42d}
.pw-item.rank-3 .pw-msg font{color:#676767}.pw-item.rank-4 .pw-msg font{color:#0ab5d0}
.pw-item.rank-6 .pw-msg font{color:#12bb63}.pw-item.rank-7 .pw-msg font{color:#008e5a}
.mum1 .pw-item{width:100%;float:none}.dark .pwd-tip{color:#3f3f42}.dark .pw-item .pw{background:#252527;color:#fff}
.dark .pw-item .copy{border-color:#313133}@media all and (max-width:760px){#pwd-result{margin:0}
.pwd-tip{padding:3rem 2rem 0;font-size:1rem}.pw-item{width:100%;float:none;margin-bottom:1.8rem;padding:0 2rem}
.pw-item .pw{padding:1.8rem 2rem 5.8rem 2rem}.pw-item .pw-msg{bottom:2.2rem}.pw-item .copy{top:auto;right:4rem;bottom:2rem;line-height:2.2rem;width:6rem}
}.menu{background:#fafbfc;padding:3rem 0;font-size:1.6rem;line-height:3rem;text-align:center}
.menu a{display:inline-block;margin:0 .5rem;padding:0 .9rem;transition:all .3s}.menu a:hover{background:#d25;color:#fff}
.dark .menu{background:#202022}.intro{padding:2rem 0;font-size:1.5rem;line-height:2em}
.intro h3{font-size:2rem;text-align:left;padding:2rem 0}.intro p{padding:2rem 0}
footer{background:#202022;padding:3rem 0;line-height:3rem;text-align:center;color:#57585f}
footer a{padding:0 1rem;display:inline-block;transition:all .3s;color:#6c6d75 !important}
footer a:hover{background:#d25;color:#fff !important}.languages li{display:inline-block;width:10%;padding:.6rem 0}
.languages .active{font-weight:700}.copyright{padding:3rem 0 0}.copyright a{color: #57585f!important;}@media all and (max-width:760px){.intro{padding:2rem}
footer a{padding:0 .5rem}.languages li{width:20%}}.column{padding:3rem 0}.column-two{display:flex;width:100%}
.column-two .mobile-btns{display:none}.column-two textarea{width:50%;min-height:26rem;background:#fff;border:1rem solid #fff;padding:1.2rem 1.5rem;box-sizing:border-box;font-size:1.5rem;line-height:1.8em;color:#3c4859;resize:vertical;box-shadow:0 0 .1rem rgba(0,0,0,0.06)}
.column-two textarea:focus{box-shadow:0 0 1px rgba(0,0,0,0.08),0 .2rem 1.2rem rgba(0,0,0,0.08)}
.column-two textarea.left{margin-right:.8rem}.column .row-btns{text-align:center;padding:2rem}
.column button{display:inline-block;margin:0 .5rem;padding:1.6rem 2.3rem;font-size:1.5rem;font-weight:700;border-radius:.5rem;background:#6036ff;border:1px solid #6036ff;color:#fff}
.column button.btn-copy,.column button.btn-clear{background:rgba(0,0,0,0);color:#676767;border-color:#8e8e94}
.dark .column-two textarea{border:1rem solid #2c2d31;background:#2c2d31;border-radius:.4rem;color:#d1d2dc}
.dark .column button.btn-copy,.dark .column button.btn-clear{color:#79797d;border-color:#4a4a4c}
@media all and (max-width:760px){.column-two{display:block}.column-two textarea{width:100%;min-height:18rem}
.column-two textarea.left{margin:0}.column-two .mobile-btns{display:flex;padding:1rem}
.column button{display:inline-block;width:35%;margin:0 .3rem;padding:1.5rem 0;font-size:1.2rem}
.column button.btn-copy,.column button.btn-clear{width:15%}.column .row-btns{display:none}
}.wide{margin-bottom:3rem;background:#fff}.operation{padding:5rem 9rem}.inputBox{height:4.6rem;background:#efeeee;border:1px solid #efeeee;margin:1rem 0 0;line-height:4.6rem;display:flex}
.inputBox:hover,.inputBox.active{background:#fff;border-color:#8a8989}.inputBox label{width:50%;font-size:1.2rem;padding-left:1.5rem}
.inputBox input{width:50%;text-align:right;background:rgba(0,0,0,0);padding-right:1.3rem}
.color-color{display:block;width:100%;height:26rem;border-radius:.4rem;margin:3rem 0 0;padding:10rem 0}
.color-color button{width:19rem;height:6rem;margin:0 auto;line-height:6rem;font-size:1.8rem;border-radius:.3rem;background:rgba(255,255,255,0.8)}
.color-color button:hover{background:#fff}.color-code{padding:3rem 0 3.2rem;text-align:center}
.color-code b{display:inline-block;padding:0 1rem}.color-code button{display:inline-block;border:1px solid #a3a3ab;font-size:1rem;padding:.3rem 1rem;text-transform:uppercase;background:rgba(0,0,0,0)}
.color-code button:hover{background:#6036ff;border-color:#6036ff;color:#fff}.color-code span{display:inline-block;padding:0 2.3rem;color:#9a9ca0}
.color-more{padding:0 0 2rem}.color-more .color-item{display:flex;margin-bottom:2rem;text-align:center}
.color-more .hd{width:9rem;height:8rem;border:1px solid #a3a3ab;line-height:8rem;margin-right:1rem}
.color-more .box{display:flex;width:100%;text-transform:uppercase}.color-more .box div{display:block;width:10%;height:8rem;line-height:8rem}
.color-more .tint div{color:rgba(255,255,255,0.25)}.color-more .shade div{color:rgba(0,0,0,0.2)}
.dark .color-code button{border:1px solid #6f6f75;color:#acacb1}.dark .color-more .hd{border:1px solid #333335}
@media all and (max-width:760px){.color-random{padding:2rem}.color-color{height:22rem;margin:0;padding:8rem 0}
.color-color button{width:15rem}.color-code{padding:3rem 2rem 3.2rem}.color-code b{width:19rem}
.color-code span{display:block;height:1.8rem;color:rgba(0,0,0,0);clear:both;border-bottom:1px solid #e4e4e6;margin-bottom:1.8rem}
.dark .color-code span{border-bottom:1px solid #333335}.color-more .hd{width:18%;height:12rem;line-height:12rem;margin-right:0}
.color-more .box{display:block;width:82%}.color-more .box div{display:inline-block;float:left;width:20%;height:6rem;line-height:6rem;font-size:1rem}
.color-more .box div:nth-child(11){display:none}}
.dice-roller{padding:2rem 0;background: #fff;}
.dices{display: flex;flex-flow: wrap;justify-content: center;width: 100%;padding:4rem 0;align-items: center;white-space: nowrap;}
.dice{width:100px; height:100px;margin:1rem; background:url(/static/css/dices.png) no-repeat;cursor:pointer}
.dice_1 {background-position: 0 0;}
.dice_2 {background-position: 0 -100px;}
.dice_3 {background-position: 0 -200px;}
.dice_4 {background-position: 0 -300px;}
.dice_5 {background-position: 0 -400px;}
.dice_6 {background-position: 0 -500px;}
.dice_t {background-position: 0 -600px;}
.dice_s {background-position: 0 -700px;}
.dice_e {background-position: 0 -800px;}
.dice-roller .result{text-align:center;padding:0 0 3rem;}
.dice-roller .result span{display:inline-block;font-weight:700;padding:0 1rem;}
.dice-roller .btns button{margin:0 auto;line-height:5rem;padding:0 5rem;border-radius:5rem;background:#6036ff;color:#fff;font-size:1.8rem}
@media (max-width: 760px){
.dice-top .ipt{width:100%;}
}
.dice-roller .ipt{display:flex;justify-content: center;line-height:3rem;padding:2rem;}
.dice-roller #count{padding:1rem 0;height:3rem;min-width: 4rem;font-weight:700;background: transparent;border: solid #c8cace;border-width: 0 0 .15rem;text-align:center;margin-left: 1rem;}
.dice-roller #count:hover{border-bottom-color:#6036ff;}
.dark .dice-roller #count{border-bottom-color:#acacb1;color: #acacb1;}
.dark .dice-roller #count:hover{border-bottom-color:#fff;color: #fff;}
.dark .dice-roller{background: #202022;}